<template>
    <!-- 提现管理 -->
    <div>
        <div class="head">
            <span>提现管理</span>
        </div>
        <div class="myviews">
            <div class="myviews-x">
                <div class="myviews-x-a">
                    <span>分销商搜索</span>
                    <input type="text" placeholder="输入商品名称/货号/ID搜索">
                </div>
                <div class="myviews-y-a">
                    <span>申请时间</span>
                    <el-date-picker
                    v-model="value13"
                    type="date"
                    placeholder="选择时间"
                    :default-value="new Date(2023, 5, 5)"
                    popper-class="date-style"
                    :style="{ width: '120px' }"
                    />
                    <span style="margin:0 10px 0 10px ">至</span>
                    <el-date-picker
                    v-model="value14"
                    type="date"
                    placeholder="选择时间"
                    :default-value="new Date(2023, 5, 5)"
                    :style="{ width: '120px' }"
                    />
                </div>
                <div class="myviews-x-c">
                    <span>提现方式</span>
                    <select id="sel" placeholder="请选择" v-model="value1">
                        <option value= "全部">全部</option>
                        <option value="自动转账" >自动转账</option  >
                        <option value="提现到微信">提现到微信</option>
                        <option value="提现到支付宝">提现到支付宝</option>
                        <option value="提现到银行卡">提现到银行卡</option>
                    </select>
                </div>
            </div>
            <div class="myviews-y">
                <div class="myviews-y-b">
                    <span>分销商等级</span>
                    <select id="sel" placeholder="请选择" v-model="value2">
                        <option value= "全部">全部</option>
                        <option value="白银" >白银</option  >
                        <option value="黄金">黄金</option>
                    </select>
                </div>
                <button class="bu1">筛选</button>
                <span class="qin">清空</span>
            </div>
        </div>
        <div class="newview">
            <div class="newview-headi">
                <div :class="{active:activeclass==1}" @click="active(1)">全部</div>
                <div :class="{active:activeclass==2}" @click="active(2)">待审核</div>
                <div :class="{active:activeclass==3}" @click="active(3)">待打款</div>
                <div :class="{active:activeclass==4}" @click="active(4)">已打款</div>
                <div :class="{active:activeclass==5}" @click="active(5)">已拒绝</div>
            </div>
            <div class="newview-b">
                <div class="newview-b-x">
                    <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 100%"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
            <el-table-column  label="基本信息" width="180" align="center">
              <template #default="scope">
                <div class="fromhead">
                  <div class="fromhead-x">{{ scope.row.img }}</div>
                  <span>{{ scope.row.nickname }}</span>
                </div>
                <div class="fromhead-a">
                  <div>ID:{{ scope.row.id}}</div>
                  <div> {{ scope.row.name }}</div>
                  <div>{{ scope.row.phone }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="grade" label="分销商等级" align="center"/>
            <el-table-column prop="method" sortable label="提现方式" align="center"/>
            <el-table-column prop="smoney" sortable label="申请提现金额" align="center" >
                <template #default="scope">
                    <div>￥{{ scope.row.smoney }}</div>
                    <span class="shou">(手续费:￥{{ scope.row.smoney*0.01}})</span>
                </template>
            </el-table-column>
            <el-table-column prop="lMonoey" sortable label="实际打款金额" align="center"/>
            <el-table-column prop="state" sortable label="状态" align="center"/>
            <el-table-column prop="time" sortable label="申请时间" align="center"/>
            <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                v-if="scope.row.state=='待审核'"
                >通过</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="Payment(scope.row)"
                v-if="scope.row.state=='待打款'"
                >打款</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="refuse(scope.row)"
                v-if="scope.row.state=='待打款'||scope.row.state=='待审核'"
                >拒绝</el-button>
                
            </template>
            </el-table-column>
            
            </el-table>
                </div >
                
            <!-- 分页 -->
            <el-pagination
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            :total="Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="display: flex;justify-content: flex-end;margin-bottom:20px;"
          />
            </div>
            
        </div>
        <!-- 提现模态框 -->
        <div class="refuse" v-if="passshow"> 
          <div class="passView">
            <div class="refuseView-X">
              <span>提现申请</span>
            </div>
            <div class="refuseView-Y">
              <div>
                <div class="span1">申请提现金额:</div><span>￥{{ti.ti1}}</span>
              </div>
              <div>
                <div class="span1">手续费:</div><span>￥{{ti.ti2}}</span>
              </div>
              <div>
                <div class="span1">实际打款金额:</div><span>￥{{ti.ti3}}</span>
              </div>
              <div>
                <button @click="close()" class="closebutton">取消</button>
                <button @click="passbutton()" class="passbutton">通过审核</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 打款模态框 -->
        <div class="refuse" v-if="dakuan"> 
          <div class="passView">
            <div class="refuseView-X">
              <span style="font-size:26px">打款</span>
            </div>
            <div class="damoney">
                <div class="span1">实际打款金额:</div><span>{{ti.ti3}}</span>
            </div>
            <div class="damoneybu">
                    <button @click="close()" class="closebutton">取消</button>
                    <button @click="passbutton()" class="passbutton">确认打款</button>
            </div>
          </div>
        </div>
        <!-- 拒绝模态框 -->
        <div class="refuse" v-if="refuseshow"> 
          <div class="refuseView">
            <div class="refuseView-X">
              <span>提现申请</span>
            </div>
            <div class="refuseView-Y">
              <div>
                <div class="span1">申请提现金额:</div><span>￥{{ti.ti1}}</span>
              </div>
              <div>
                <div class="span1">手续费:</div><span>￥{{ti.ti2}}</span>
              </div>
              <div>
                <div class="span1">实际打款金额:</div><span>￥{{ti.ti3}}</span>
              </div>
              <div>
                <div class="span1">拒绝理由:</div>
                <textarea @change="jujueview()" v-model="jueview"></textarea>
                <span class="jujuezi">{{jujuezi}}/100</span>
              </div>
              <div style="margin-top: 150px; margin-left: 100px;">
                <button @click="close()" class="closebutton">取消</button>
                <button @click="determineClose()" class="passbutton">拒绝</button>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onBeforeMount, reactive } from 'vue';

const value1=ref() //分类下拉框
const value2=ref('全部') //分销状态下拉框
// 多久到多久的时间选择
const value13 = ref('')
const value14 = ref('')
//动态类
const activeclass=ref(1)
const pagesize=ref(5) //每页显示多少条
const currentPage=ref(1) //当前是第几页
const Total=ref() //总条数
const passshow=ref(false) //通过模态框
const dakuan=ref(false)//打款模态框
const refuseshow=ref(false) //拒绝模态框
const jujuezi=ref(0) //拒绝打字总数
const jueview=ref()   //拒绝输入框的字数

const ti:any=reactive({ //提现申请的数据
    ti1:"",
    ti2:'',
    ti3:''
})
// 表格

const tableData= [
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney: 2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'待审核' ,//状态
    time: '申请:2020.05.12 09:23',
  },
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney: 2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'待审核' ,//状态
    time: '申请:2020.05.12 09:23',
  },
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney: 2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'待打款' ,//状态
    time: '申请:2020.05.12 09:23',
  },
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney: 2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'待打款' ,//状态
    time: '申请:2020.05.12 09:23',
  },
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney:2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'已拒绝' ,//状态
    time: '申请:2020.05.12 09:23',
  },
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney:2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'待审核' ,//状态
    time: '申请:2020.05.12 09:23',
  },
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney: 2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'待审核' ,//状态
    time: '申请:2020.05.12 09:23',
  },
  {
    nickname:"暴走的王",//昵称
    img:"郫县",//图片地址
    id:'1',
    name:'八蛋',
    phone:"18045276533",
    information: '12987122',
    grade:'白银', //等级
    method: '自动到账微信零钱', //提现方式
    smoney:2320,//申请提现金额
    lMonoey:0,//实际打款金额
    state:'待审核' ,//状态
    time: '申请:2020.05.12 09:23',
  },
]

const active=((obj:any)=>{
    activeclass.value=obj
})
// 分页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pagesize.value=val
  // console.log(pagesize.value=val);
  
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  // console.log(val);
  currentPage.value=val

  
}
onBeforeMount(()=>{
  // Total.value=Number(Math.ceil(tableData.length/pagesize.value)+'0') //初始化更新分页总数
  Total.value=Number(tableData.length) //初始化更新分页总数
  
  
})
// 关闭拒绝框
const close=(()=>{
    passshow.value=false
    dakuan.value=false
    refuseshow.value=false
})
// 打款按钮
const Payment=((obj:any)=>{
    dakuan.value=true
    ti.ti3=obj.smoney-obj.smoney*0.01
})
// 通过按钮
const passK=((obj:any)=>{
    passshow.value=true
    ti.ti1=obj.smoney
    ti.ti2=(obj.smoney*0.01)
    ti.ti3=(ti.ti1-ti.ti2)
})
// 拒绝按钮
const refuse=((obj:any)=>{
    refuseshow.value=true
    ti.ti1=obj.smoney
    ti.ti2=(obj.smoney*0.01)
    ti.ti3=(ti.ti1-ti.ti2)
})
// 拒绝的输入框
const jujueview:any=(()=>{
  let a=jueview.value
  jujuezi.value=a.length  
})
</script>

<style scoped lang="less">
.active{
    color: #ed742f;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: white;
}
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
// 一级
.myviews{
    width: 100%;
    height: 131px;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
    margin-top: 20px;
    input{
        width: 190px;
        height: 20px;
        font-size: 12px;
    }
    font-size: 14px;
}
.myviews-x{
    display: flex;
    height: 50%;
    align-items: center;
    width: 100%;
    margin-left: 20px;
}
.myviews-x-a{
    span{
        margin-right: 10px;
    }
    margin-right: 30px;
}
.myviews-x-c{
    span{
        margin-right: 10px;
        margin-left: 30px;
        
    }
    select{
            width: 136px;
            height: 26px;
        }
}
.myviews-y{
    display: flex;
    width: 100%;
    height: 50%;
    align-items: center;
    margin-left: 20px;
}
.myviews-y-a{
    span{
        margin-right: 10px;
    }
    
}
.myviews-y-b{
    select{
            width: 140px;
            height: 26px;
            margin-left: 8px;
        }
}
.bu1{
    width: 50px;
    height:30px;
    background-color:#ed742f ;
    border-radius: 5px;
    border: 0;
    color: white;
    margin-left: 25px;
}
.qin{
    color: #ed742f;
    margin-left: 20px;
}
// 三级
.newview{
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    
}
.newview-headi{
    width: 100%;
    display: flex;
    div{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        width: 130px;
        height:50px;
        cursor: pointer;
    }
}
.bu2{
    width: 70px;
    height: 30px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    color: #2c2b2b;
    margin-left: 20px;
}
.mb-2{
    margin-left: 10px;
}
// 分页
/deep/el-pagination{
    flex-direction: column;
    justify-content: flex-end;
  }
  .newview-b{
    background-color: white;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
  .el-table{
    margin-bottom: 20px;
  }
  .newview-b-x{
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
  }
  // 表格第一列的样式
.fromhead{
  display: flex;
  font-size: 12px;
}
.fromhead-x{
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.fromhead-a{
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  >div{
    height: 17px;
  }
}
// 表格手续费计算
.shou{
    font-size: 10px;
    color: #797979;
}
// 模态框公共样式
.refuse{
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
}

// 模态框公共样式
.refuseView-X{
  display: flex;
  align-items: center;
  justify-content:center ;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  width: 100%;
  height: 40px;
}
// 模态框公共样式
.refuseView-Y{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  color: #333333;
  div:nth-child(1){
    width: 60%;
    height: 10%;
  }
  div:nth-child(2){
    width: 60%;
    height: 10%;
  }
  div:nth-child(3){
    width: 60%;
    height: 10%;
  }
  div:nth-child(4){
    width: 60%;
    height: 10%;
  }
  div:nth-child(5){
    width: 60%;
    height: 30%;
    span{
      position: absolute;
      bottom:95px;
      right:220px
    }
  }
  >div{
    margin-top: 20px;
  }
  div{
    display: flex;
  }
}
/deep/.span1{
  width: 100px !important;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}
// 通过的模态框
.passView{
  position: absolute;
  width: 500px;
  height:300px;
  background-color: white;
  left:35%;
  top:20%;
  box-sizing: border-box;
  padding: 10px;
}
// 按钮

.closebutton{
      width: 110px;
      height: 35px;
      background-color: white;
      border: 1px solid green;
      border-radius: 5px;
      margin-right: 60px;
      margin-top: 20px;
    }
.passbutton{
      width: 110px;
      height: 35px;
      background-color: #623ceb;
      border: 1px solid #623ceb;
      color: white;
      border-radius: 5px;
      margin-top: 20px;
    }
// 打款模态框
.damoney{
    width: 100%;
    display: flex;
    align-items: center;
    height:100px;
    div{
        margin-left:100px
    }
}
// 打款按钮
.damoneybu{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
// 拒绝的模态框
.refuseView{
  position: absolute;
  width: 700px;
  height:500px;
  background-color: white;
  left:30%;
  top:15%;
  box-sizing: border-box;
  padding: 10px;
  textarea{
      width: 350px;
      height: 160px;
      position: absolute;
      bottom: 150px;
      left:255px
    }
    .jujuezi{
        position: absolute;
        z-index: 9999;
        bottom: 160px;
        left:550px
    }
}
</style>